<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 审批任务类型定义
interface ApprovalTask {
  id: string;
  title: string;
  applicant: string;
  department: string;
  time: string;
  type: string;
  status: string;
}

// 模拟待审批数据
const PENDING_APPROVAL_DATA: ApprovalTask[] = [
  {
    id: '1',
    title: '请假申请',
    applicant: '李小红',
    department: '技术部',
    time: '2024-01-15 14:30',
    type: '人事',
    status: 'pending'
  },
  {
    id: '2',
    title: '采购申请单',
    applicant: '王强',
    department: '行政部',
    time: '2024-01-15 10:15',
    type: '行政',
    status: 'pending'
  },
  {
    id: '3',
    title: '项目预算申请',
    applicant: '陈思',
    department: '市场部',
    time: '2024-01-14 16:45',
    type: '财务',
    status: 'pending'
  },
  {
    id: '4',
    title: '加班申请',
    applicant: '张伟',
    department: '研发部',
    time: '2024-01-14 19:30',
    type: '人事',
    status: 'pending'
  },
  {
    id: '5',
    title: '报销申请',
    applicant: '刘芳',
    department: '财务部',
    time: '2024-01-14 11:20',
    type: '财务',
    status: 'pending'
  }
];

// 状态管理
const searchText = ref('');
const selectedTaskIds = ref<string[]>([]);
const isBatchMode = ref(false);
const showFilterModal = ref(false);
const isRefreshing = ref(false);
const approvalTasks = ref<ApprovalTask[]>([...PENDING_APPROVAL_DATA]);

// 计算过滤后的任务列表
const filteredTasks = computed(() => {
  if (!searchText.value) return approvalTasks.value;
  
  return approvalTasks.value.filter(task => 
    task.title.toLowerCase().includes(searchText.value.toLowerCase()) ||
    task.applicant.toLowerCase().includes(searchText.value.toLowerCase()) ||
    task.department.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

// 计算是否有选中的任务
const hasSelectedTasks = computed(() => selectedTaskIds.value.length > 0);

// 处理搜索文本变化
const handleSearchChange = (text: string) => {
  searchText.value = text;
};

// 处理筛选按钮点击
const handleFilterPress = () => {
  showFilterModal.value = true;
};

// 处理任务点击
const handleTaskPress = (taskId: string) => {
  if (isBatchMode.value) {
    // 批量模式下，切换任务选中状态
    const index = selectedTaskIds.value.indexOf(taskId);
    if (index > -1) {
      selectedTaskIds.value.splice(index, 1);
    } else {
      selectedTaskIds.value.push(taskId);
    }
  } else {
    // 非批量模式下，导航到审批详情页
    router.push(`/approval-detail?id=${taskId}`);
  }
};

// 进入批量模式
const enterBatchMode = () => {
  isBatchMode.value = true;
  selectedTaskIds.value = [];
};

// 退出批量模式
const exitBatchMode = () => {
  isBatchMode.value = false;
  selectedTaskIds.value = [];
};

// 全选/取消全选
const toggleSelectAll = () => {
  if (selectedTaskIds.value.length === filteredTasks.value.length) {
    selectedTaskIds.value = [];
  } else {
    selectedTaskIds.value = filteredTasks.value.map(task => task.id);
  }
};

// 检查任务是否被选中
const isTaskSelected = (taskId: string) => {
  return selectedTaskIds.value.includes(taskId);
};

// 批量通过
const handleBatchApprove = () => {
  if (!hasSelectedTasks.value) return;
  
  // 模拟批量通过操作
  alert(`确定要通过选中的 ${selectedTaskIds.value.length} 个任务吗？`);
  // 实际应用中这里会调用API进行批量处理
  
  // 处理完成后退出批量模式
  exitBatchMode();
};

// 批量驳回
const handleBatchReject = () => {
  if (!hasSelectedTasks.value) return;
  
  // 模拟批量驳回操作
  alert(`确定要驳回选中的 ${selectedTaskIds.value.length} 个任务吗？`);
  // 实际应用中这里会调用API进行批量处理
  
  // 处理完成后退出批量模式
  exitBatchMode();
};

// 下拉刷新
const handleRefresh = async () => {
  isRefreshing.value = true;
  try {
    // 模拟刷新数据
    await new Promise(resolve => setTimeout(resolve, 1000));
    // 实际应用中这里会重新获取数据
    approvalTasks.value = [...PENDING_APPROVAL_DATA];
  } finally {
    isRefreshing.value = false;
  }
};

// 关闭筛选模态框
const closeFilterModal = () => {
  showFilterModal.value = false;
};

// 应用筛选
const applyFilter = () => {
  // 模拟应用筛选
  // 实际应用中这里会根据筛选条件过滤数据
  closeFilterModal();
};

// 返回到上一页
const handleBack = () => {
  router.back();
};
</script>

<template>
  <div class="pending-approval-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <button class="back-button" @click="handleBack">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="19" y1="12" x2="5" y2="12"></line>
          <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
      </button>
      <h1 class="page-title">待我审批</h1>
      <div class="header-actions">
        <button class="action-button" @click="handleFilterPress">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
          </svg>
        </button>
        <button v-if="!isBatchMode" class="action-button" @click="enterBatchMode">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
            <line x1="12" y1="10" x2="12" y2="14"></line>
            <line x1="10" y1="12" x2="14" y2="12"></line>
          </svg>
        </button>
        <button v-else class="action-button" @click="exitBatchMode">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-input-container">
        <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input
          type="text"
          class="search-input"
          placeholder="搜索标题、申请人或部门"
          v-model="searchText"
          @input="handleSearchChange($event.target.value)"
        />
        <button v-if="searchText" class="clear-search-button" @click="searchText = ''">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 审批任务列表 -->
    <div class="tasks-container">
      <div v-if="filteredTasks.length === 0" class="empty-state">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
          <path d="M8 14h.01"></path>
          <path d="M12 14h.01"></path>
          <path d="M16 14h.01"></path>
          <path d="M8 18h.01"></path>
          <path d="M12 18h.01"></path>
          <path d="M16 18h.01"></path>
        </svg>
        <p class="empty-state-text">暂无待审批任务</p>
      </div>
      
      <div v-else class="tasks-list">
        <!-- 批量模式下的全选头部 -->
        <div v-if="isBatchMode" class="batch-header">
          <button class="select-all-button" @click="toggleSelectAll">
            <div class="checkbox">
              <svg v-if="selectedTaskIds.length === filteredTasks.length" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
            </div>
            <span>全选 ({{ selectedTaskIds.length }}/{{ filteredTasks.length }})</span>
          </button>
        </div>
        
        <!-- 任务列表项 -->
        <button
          v-for="task in filteredTasks"
          :key="task.id"
          class="task-item"
          :class="{ selected: isTaskSelected(task.id) }"
          @click="handleTaskPress(task.id)"
        >
          <div class="task-content">
            <!-- 批量模式下的复选框 -->
            <div v-if="isBatchMode" class="checkbox-container">
              <div class="checkbox" :class="{ checked: isTaskSelected(task.id) }">
                <svg v-if="isTaskSelected(task.id)" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
            </div>
            
            <!-- 任务信息 -->
            <div class="task-info" :class="{ 'has-checkbox': isBatchMode }">
              <div class="task-header">
                <h3 class="task-title">{{ task.title }}</h3>
                <span class="task-type">{{ task.type }}</span>
              </div>
              <div class="task-meta">
                <span class="task-applicant">{{ task.applicant }} · {{ task.department }}</span>
                <span class="task-time">{{ task.time }}</span>
              </div>
            </div>
          </div>
          
          <!-- 非批量模式下的箭头 -->
          <svg v-if="!isBatchMode" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      </div>
    </div>

    <!-- 批量操作按钮 -->
    <div v-if="isBatchMode && hasSelectedTasks" class="batch-actions">
      <button class="batch-action-button reject" @click="handleBatchReject">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
        批量驳回
      </button>
      <button class="batch-action-button approve" @click="handleBatchApprove">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        批量通过
      </button>
    </div>

    <!-- 筛选模态框 -->
    <div v-if="showFilterModal" class="modal-overlay" @click.self="closeFilterModal">
      <div class="filter-modal">
        <div class="modal-header">
          <h3 class="modal-title">筛选</h3>
          <button class="close-button" @click="closeFilterModal">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <!-- 筛选内容，这里简化处理 -->
          <div class="filter-section">
            <h4 class="filter-section-title">审批类型</h4>
            <div class="filter-options">
              <button class="filter-option">人事</button>
              <button class="filter-option">财务</button>
              <button class="filter-option">行政</button>
              <button class="filter-option">其他</button>
            </div>
          </div>
          
          <div class="filter-section">
            <h4 class="filter-section-title">时间范围</h4>
            <div class="filter-options">
              <button class="filter-option">今天</button>
              <button class="filter-option">昨天</button>
              <button class="filter-option">最近7天</button>
              <button class="filter-option">最近30天</button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-button cancel" @click="closeFilterModal">取消</button>
          <button class="modal-button confirm" @click="applyFilter">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.pending-approval-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-button {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.action-button {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索栏 */
.search-bar {
  padding: 12px 16px;
  background-color: white;
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #6B7280;
  z-index: 1;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 16px 0 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  color: #1F2937;
}

.search-input:focus {
  outline: none;
  border-color: #969FFF;
}

.clear-search-button {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 4px;
}

/* 任务容器 */
.tasks-container {
  min-height: calc(100vh - 160px);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6B7280;
}

.empty-state-text {
  margin-top: 16px;
  font-size: 16px;
}

/* 任务列表 */
.tasks-list {
  display: flex;
  flex-direction: column;
}

/* 批量模式头部 */
.batch-header {
  padding: 12px 16px;
  background-color: white;
  border-bottom: 1px solid #E5E7EB;
}

.select-all-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* 任务项 */
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: white;
  border-bottom: 1px solid #E5E7EB;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  text-align: left;
}

.task-item:hover {
  background-color: #F9FAFB;
}

.task-item.selected {
  background-color: #EBF5FF;
}

.task-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.checkbox-container {
  margin-right: 12px;
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.checkbox.checked {
  background-color: #969FFF;
  border-color: #969FFF;
  color: white;
}

.task-info {
  flex: 1;
}

.task-info.has-checkbox {
  margin-left: 0;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  color: #1F2937;
  margin: 0;
  flex: 1;
}

.task-type {
  font-size: 12px;
  color: #969FFF;
  background-color: #EEF2FF;
  padding: 2px 8px;
  border-radius: 4px;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-applicant {
  font-size: 14px;
  color: #6B7280;
}

.task-time {
  font-size: 14px;
  color: #9CA3AF;
}

/* 批量操作按钮 */
.batch-actions {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  display: flex;
  padding: 16px;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  gap: 12px;
  z-index: 100;
}

.batch-action-button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.batch-action-button:hover {
  opacity: 0.9;
}

.batch-action-button.reject {
  background-color: #FEF2F2;
  color: #EF4444;
}

.batch-action-button.approve {
  background: linear-gradient(90deg, #969FFF, #5147FF);
  color: white;
}

/* 筛选模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}

.filter-modal {
  width: 80%;
  max-width: 400px;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #E5E7EB;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 4px;
}

.modal-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-section-title {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  margin: 0 0 12px 0;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-option {
  padding: 8px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 20px;
  background-color: white;
  color: #6B7280;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-option:hover {
  border-color: #969FFF;
  color: #969FFF;
}

.modal-footer {
  padding: 16px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  gap: 12px;
}

.modal-button {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.modal-button:hover {
  opacity: 0.9;
}

.modal-button.cancel {
  background-color: #F3F4F6;
  color: #374151;
  border: none;
}

.modal-button.confirm {
  background: linear-gradient(90deg, #969FFF, #5147FF);
  color: white;
  border: none;
}
</style>